<div class="widget-wrapper">
  <div class="tile body-container" ng-if="$ctrl.type=='visualization'" ng-class="$ctrl.type"
    ng-switch="$ctrl.queryResult.getStatus()">
    <div class="body-row">
      <div class="t-header widget clearfix">
        <div class="dropdown pull-right widget-menu-remove"  ng-if="!$ctrl.public && $ctrl.dashboard.canEdit()">
          <div class="actions">
            <a ng-click="$ctrl.deleteWidget()" title="Remove From Dashboard"><i class="zmdi zmdi-close"></i></a>
          </div>
        </div>
        <div class="dropdown pull-right widget-menu-regular" ng-if="!$ctrl.public" uib-dropdown>
          <div class="actions">
            <a data-toggle="dropdown" uib-dropdown-toggle><i class="zmdi zmdi-more"></i></a>
          </div>

          <ul class="dropdown-menu pull-right" uib-dropdown-menu style="z-index:1000000">
            <li ng-class="{'disabled': $ctrl.queryResult.isEmpty()}"><a ng-href="{{$ctrl.queryResult.getLink($ctrl.query.id, 'csv')}}" download="{{$ctrl.queryResult.getName($ctrl.query.name, 'csv')}}" target="_self">Download as CSV File</a></li>
            <li ng-class="{'disabled': $ctrl.queryResult.isEmpty()}"><a ng-href="{{$ctrl.queryResult.getLink($ctrl.query.id, 'xlsx')}}" download="{{$ctrl.queryResult.getName($ctrl.query.name, 'xlsx')}}" target="_self">Download as Excel File</a></li>
            <li><a ng-href="{{$ctrl.query.getUrl(true, $ctrl.widget.visualization.id)}}" ng-show="$ctrl.canViewQuery">View Query</a></li>
            <li><a ng-show="$ctrl.dashboard.canEdit()" ng-click="$ctrl.deleteWidget()">Remove From Dashboard</a></li>
          </ul>
        </div>
        <div class="th-title">
          <p class="hidden-print">
            <span ng-hide="$ctrl.canViewQuery">{{$ctrl.query.name}}</span>
            <query-link query="$ctrl.query" visualization="$ctrl.widget.visualization" ng-show="$ctrl.canViewQuery"></query-link>
            <small><visualization-name visualization="$ctrl.widget.visualization"/></small>
          </p>
          <p class="visible-print">
            {{$ctrl.query.name}}
            <visualization-name visualization="$ctrl.widget.visualization"/>
          </p>
          <div class="text-muted query--description" ng-bind-html="$ctrl.query.description | markdown"></div>
        </div>
      </div>
      <div class="m-b-10" ng-if="$ctrl.localParametersDefs().length > 0">
        <parameters parameters="$ctrl.localParametersDefs()"></parameters>
      </div>
    </div>

    <div ng-switch-when="failed" class="body-row-auto scrollbox">
      <div class="alert alert-danger m-5" ng-show="$ctrl.queryResult.getError()">Error running query: <strong>{{$ctrl.queryResult.getError()}}</strong></div>
    </div>
    <div ng-switch-when="done" class="body-row-auto scrollbox" ng-style="$ctrl.getWidgetStyles()">
      <visualization-renderer visualization="$ctrl.widget.visualization" query-result="$ctrl.queryResult" class="t-body"></visualization-renderer>
    </div>
    <div ng-switch-default class="body-row-auto spinner-container">
      <div class="spinner">
        <i class="zmdi zmdi-refresh zmdi-hc-spin zmdi-hc-5x"></i>
      </div>
    </div>

    <div class="body-row clearfix tile__bottom-control">
      <a class="small hidden-print" ng-click="$ctrl.reload(true)" ng-if="!$ctrl.public">
        <i class="zmdi zmdi-time-restore"></i> <span am-time-ago="$ctrl.queryResult.getUpdatedAt()"></span>
      </a>
      <span class="small hidden-print" ng-if="$ctrl.public">
        <i class="zmdi zmdi-time-restore"></i> <span am-time-ago="$ctrl.queryResult.getUpdatedAt()"></span>
      </span>
      <span class="visible-print">
        <i class="zmdi zmdi-time-restore"></i> {{$ctrl.queryResult.getUpdatedAt() | dateTime}}
      </span>

      <button class="btn btn-sm btn-default pull-right hidden-print btn-transparent btn__refresh" ng-click="$ctrl.reload(true)" ng-if="!$ctrl.public"><i class="zmdi zmdi-refresh"></i></button>
    </div>
  </div>

  <div class="tile body-container" ng-if="$ctrl.type=='restricted'" ng-class="$ctrl.type">
    <div class="t-body body-row-auto scrollbox">
      <div class="text-center">
        <h1><span class="zmdi zmdi-lock"></span></h1>
        <p class="text-muted">
          This widget requires access to a data source you don't have access to.
        </p>
      </div>
    </div>
  </div>

  <div class="tile body-container" ng-hide="$ctrl.widget.width === 0" ng-if="$ctrl.type=='textbox'" ng-class="$ctrl.type">
    <div class="body-row clearfix t-body">
      <div class="dropdown pull-right widget-menu-remove" ng-if="!$ctrl.public && $ctrl.dashboard.canEdit()">
        <div class="dropdown-header">
          <a class="actions" ng-click="$ctrl.deleteWidget()" title="Remove From Dashboard"><i class="zmdi zmdi-close"></i></a>
        </div>
      </div>
      <div class="dropdown pull-right widget-menu-regular" ng-if="!$ctrl.public && $ctrl.dashboard.canEdit()" uib-dropdown>
        <div class="dropdown-header">
          <a data-toggle="dropdown" uib-dropdown-toggle class="actions"><i class="zmdi zmdi-more"></i></a>
        </div>

        <ul class="dropdown-menu pull-right" uib-dropdown-menu style="z-index:1000000">
          <li><a ng-show="$ctrl.dashboard.canEdit()" ng-click="$ctrl.editTextBox()">Edit</a></li>
          <li><a ng-show="$ctrl.dashboard.canEdit()" ng-click="$ctrl.deleteWidget()">Remove From Dashboard</a></li>
        </ul>
      </div>
    </div>
    <div class="body-row-auto scrollbox tiled t-body p-15" ng-bind-html="$ctrl.widget.text | markdown"></div>
  </div>
</div>
